<!DOCTYPE html>
<html class="ui-page-login">

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<link href="css/mui.min.css" rel="stylesheet" />
		<link href="css/style.css" rel="stylesheet" />
		<style>
			.area {
				margin: 20px auto 0px auto;
			}
			.mui-input-group:first-child {
				margin-top: 20px;
			}
			.mui-input-group label {
				width: 22%;
			}
			.mui-input-row label~input,
			.mui-input-row label~select,
			.mui-input-row label~textarea {
				width: 78%;
			}
			.mui-checkbox input[type=checkbox],
			.mui-radio input[type=radio] {
				top: 6px;
			}
			.mui-content-padded {
				margin-top: 25px;
			}
			.mui-btn {
				padding: 10px;
			}
			#graph2{
				width: 99%;
				height: 100%;
				margin-left: 2%;
				margin-right: 1px;
			}
			
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">停车场监管</h1> 
		</header>
		<div class="mui-content">
			
			<div style="height:100%;width: 100%;" class="mui-scroll-wrapper mui-slider-indicatorcode mui-segmented-control mui-segmented-control-inverted">
				<div class="mui-scroll" style="height: 98%;width:100% ;">
					<!--这里放置真实显示的DOM内容-->
					<div id="graph2"></div>
				</div>
			</div>
		</div>
		
		
<script src="js/mui.min.js"></script>
<script src="js/echarts.js"></script>
	<script>
			mui.init();
			mui('.mui-scroll-wrapper').scroll({
				deceleration: 0.0005 //flick 减速系数，系数越大，滚动速度越慢，滚动距离越小，默认值0.0006
			});
			var wt;
			mui.plusReady(function(){
				//获得事件参数
				wt=plus.nativeUI.showWaiting();
			  	var sname = localStorage.getItem("sname");
			  	mui.ajax({
					url:"http://118.24.14.224/carStation/getCostByHour.php",
					data:{
						"sName":sname
					},
					async: true,
					type:'post',
					dataType:'json',
					timeout:10000,
					success:function(data){															
						anData(data);
						//mui.alert(JSON.stringify(data));
						wt.close();
					},
					error:function(xhr,type,errorThrown){						
						mui.alert("error"+type);
						wt.close();
					}
				});
			});
			
			
			function anData(data){
				//data = JSON.parse(data);
				var xindex = [];//24h
				var cost = [];
				var i = 0;
				for(var x=0;x<24;x++){
					xindex[x] = (x+1)+":00"; 
					cost[x] = 0; 
				}
				for(i in data){
					var indexofhour = parseInt(data[i].hour.split("-")[3]);
					//mui.alert(indexofhour);
					cost[indexofhour-1] = data[i].cost;
				}
				var myChart = document.getElementById('graph2');
				i = cost.length;
				//myChart.style.height = i*40+"px";
				initIndexGraph(xindex,cost);
			}
			
			function initIndexGraph(xindex,cost){
			   var myChart2 = echarts.init(document.getElementById('graph2'));
		       option = {
				    title : {
				        text: '停车场营收统计',
				        subtext: '按时段划分'
				    },
				    tooltip : {
				        trigger: 'axis'
				    },
				    legend: {
				        data:[
				            '营收数据',''
				        ]
				    },
				    toolbox: {
				        show : true,
				        feature : {
				            mark : {show: true},
				            dataView : {show: true, readOnly: false},
				            magicType : {show: true, type: ['line', 'bar']},
				            restore : {show: true},
				            saveAsImage : {show: true}
				        }
				    },
				    calculable : true,
				    yAxis : [
				        {
				            type : 'category',
				            data : xindex
				        },
				        {
				            type : 'category',
				            boundaryGap : [0, 0.01]
				        }
				    ],
				    xAxis : [
				        {
				            type : 'value',
				            axisLabel:{formatter:'{value}'}
				        }
				    ],
				    series : [
				        {
				            name:'营收数据',
				            type:'bar',
				            itemStyle: {normal: {color:'rgba(181,195,52,1)', label:{show:true}}},
				            data:cost
				        },
    				]
			};     
		        // 使用刚指定的配置项和数据显示图表。
		        myChart2.setOption(option);
			}
	</script>
	</body>

</html>